<template>
	<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" class="container">
		<!-- @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" -->
		<!--<web-view :src="url"></web-view> -->
		<view class="videotitle">左右滑动 切换视频</view>
		<!-- <video id="myVideo" :src="url" :enable-progress-gesture="false" :autoplay="true" :loop="false" :show-center-play-btn="false" @bindplay="onPlay" @bindpause="onPause" @bindended="onVideoend" class="myVideo"></video> -->
		<video
		  id="myVideo"
		  :src="url"
		  :enable-progress-gesture="false"
		  :autoplay="true"
		  :loop="false"
		  :show-center-play-btn="false"
		  @bindplay="onPlay"
		  @bindpause="onPause"
		  @bindended="onVideoend"
		  class="myVideo"
		></video>
	</view>
</template>

<script>
	let touchDot = 0;
	let tMove = 0;
	let time = 0;
	let interval = -1;
	let isplay = true;
	let videoindex = 0;
	let videonames = ["xjyl.mp4","yejing.mp4","yejing3.mp4","yejing4.mp4","xyxcwx.mp4"];
	export default {
		data() {
			return {
				url: '',
				videoContext: null,
				videocount: 5,
			}
		},
		onLoad(e) {
			if (e.url) {
				this.url = e.url
			}
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onShow(){
			if (this.videoContext)
				this.videoContext.play();
		},
		onHide(){
			if (this.videoContext)
				this.videoContext.pause();
		},
		methods: {
			/**
			   * ===================== 滑动事件
			   */
			  // 触摸开始事件
			  touchStart(e) {
				  if (e.touches.length == 1) {
					touchDot = e.touches[0].clientX; // 获取触摸时的原点
					tMove = touchDot;
				  }

					//if (e.touches.length == 1) {
					//	//设置触摸起始点水平方向位置
					//	this.startX=e.touches[0].clientX;
					//}
					// 使用js计时器记录时间
					//interval = setInterval(function () {
					//	time++;
					//}, 100);
			  },
			  // 触摸移动事件
			  touchMove(e) {
				  // console.log(e)
				  if (e.touches.length == 1) {
					 tMove = e.touches[0].clientX;
				  }
			  },
			  // 触摸结束事件
			  touchEnd(e) {
				  console.log("touchMove:" + tMove + " touchDot:" + touchDot + " diff:" + (tMove - touchDot));
				  // 向左滑动
				  if (tMove - touchDot <= -40 ) {
				  	console.log('向左滑动')
					if (this.videoContext){
						if(videoindex <= 0)
						   videoindex = 5;

						videoindex -= 1;
						this.videoContext.stop();
						this.url = 'https://jiahe.dev3.lishengli.xin/file/' + videonames[videoindex];
						this.videoContext.play();
						isplay = true;
					}
				  }
				  // 向右滑动
				  else if (tMove - touchDot >= 40 ) {
				  	console.log('向右滑动');
				  	//wx.switchTab({
				  	//  url: 'pages/position_man/position_man'
				  	//});
					if (this.videoContext && videoindex < (videonames.length - 1)){
						if(videoindex >= (videonames.length-1))
						   videoindex = 0;

						videoindex += 1;
					    this.videoContext.stop();
					    this.url = 'https://jiahe.dev3.lishengli.xin/file/' + videonames[videoindex];
					    this.videoContext.play();
					    isplay = true;
					}
				  }
				  else{
					  if (this.videoContext){
						  if(isplay){
					  	     this.videoContext.pause();
							 isplay = false;
						  }
						  else{
							 this.videoContext.play();
							 isplay = true;
						  }
					  }
				  }

				  if(interval != -1){
				  	clearInterval(interval); // 清除setInterval
				  	time = 0;
				  }
			  },
			  onPlay(){
				  isplay = true;
			  },
			  onPause(){
				  isplay = false;
			  },
			  onVideoend(){
				isplay = false;

				if (this.videoContext && videoindex < (videonames.length - 1)){
					videoindex += 1;
				    this.url = 'https://jiahe.dev3.lishengli.xin/file/' + videonames[videoindex];
				    this.videoContext.play();
				    isplay = true;
				}
			},
		}
	}
</script>

<style>
	.videotitle{
		font-size: 16;
		color: whitesmoke;
		justify-content: center; /**内容居中*/
		padding-bottom: 30px;
	}
	.container{
		display: flex;    /*设置显示样式**/
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		justify-content: center; /**内容居中*/
		flex-direction:column; /**子view排列方式row--水平 column--垂直*/
		background-color: #1f1c1c;
		width: 100%;
		height: 100%;
	}
	.myVideo{
		width:100%;
	}
</style>
